import React from 'react'
import clsx from 'clsx'
import { useExcalidrawAppState } from '../ExcalidrawCore'

const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
  const appState = useExcalidrawAppState()
  return (
    <div
      className={clsx('layer-ui__wrapper__footer-center zen-mode-transition', {
        'layer-ui__wrapper__footer-left--transition-bottom': appState.zenModeEnabled
      })}
    >
      {children}
    </div>
  )
}

export default FooterCenter
FooterCenter.displayName = 'FooterCenter'
